<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <title>职位选择</title>
        <style>
            body {
                font-family: 微软雅黑
            }

            .left {
                float: left;
                width: 100px;
                text-align: center
            }

            .left select {
                width: 80px;
                margin-top: 10px;
            }

            .middle {
                float: left;
                width: 32px;
                padding-top: 40px;
            }

            .middle input {
                margin-top: 10px;
            }

            .right {
                float: left;
                width: 100px;
                text-align: center
            }

            .right select {
                width: 80px;
                margin-top: 10px;
            }
        </style>
    </head>

    <body>
        <div id="ex">
            <div class="left">
                <span>可选职位</span>
                <select size="6" multiple="multiple" v-model="job">
                    <option v-for="value in jobList">{{value}}</option>
                </select>
            </div>
            <div class="middle">
                <input type="button" value=">>" v-on:click="toMyJob">
                <input type="button" value="<<" v-on:click="toJob">
            </div>
            <div class="right">
                <span>已选职位</span>
                <select size="6" multiple="multiple" v-model="myJob">
                    <option v-for="value in myJobList" :value="value">{{value}}</option>
                </select>
            </div>
        </div>
        <script>
            new Vue({
                el: '#ex',
                data: {
                    jobList: ['歌手', '演员', '酒店管理', '教师', '公务员', '公司职务'],//左边职务列表
                    job: [],//可选职位列表、选中的职位
                    myJobList: [],
                    myJob: []//已选职位列表、选中的职位
                },
                methods: {
                    toMyJob:function () {
                        for (var i = 0; i < this.job.length; i++) {
                            this.myJobList.push(this.job[i]);//吧可选职位中添加到已选职位中
                            var index = this.jobList.indexOf(this.job[i]);//获取选中的选项列表
                            this.jobList.splice(index, 1);//从可选职位中移除
                        }
                        this.job = [];
                    },
                    toJob:function(){
                        for (var i = 0; i < this.myJob.length; i++) {
                            this.jobList.push(this.myJob[i]);
                            var index= this.myJobList.indexOf(this.myJob[i]);
                            this.myJobList.splice(index,1);
                        }
                        this.myJob=[];
                    }
                }
            })
        </script>
    </body>

</html>